<template>
<div>
  <!-- 引入TeacherSearch组件 -->
  <TeacherSearch @getData="handleGetResponseData"></TeacherSearch>

  <!-- 展示从TeacherSearch组件接收到的数据 -->
<!--  <div class="response-data">-->
<!--    {{responseDataFromChild}}-->
<!--  </div>-->
  <hr>
  <div>
    <!-- 解构响应数据 -->
    <div class="teacher-list-container">
      <div
          class="teacher-item"
          v-for="teacher in responseDataFromChild.data"
          :key="teacher.teacherId"
          style="flex-basis: calc(25% - 10px); margin: 0 5px;"
      >
        <p>教师姓名：{{ teacher.teacherName }}</p>
        <p>授课内容：{{ teacher.courseContent }}</p>
        <p>好评率：{{ (teacher.positiveRate * 100).toFixed(2) }}%</p>
        <p>差评率：{{ (teacher.negativeRate * 100).toFixed(2) }}%</p>
        <p>院系：{{ teacher.department }}</p>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import TeacherSearch from "@/components/TeacherSearch.vue";

export default {
  name: "ListTeacher",
  components: {TeacherSearch},
  data() {
    return {
      responseDataFromChild: '' // 用来存储从TeacherSearch组件接收到的数据
    };
  },
  methods: {
    handleGetResponseData(data) {
      this.responseDataFromChild = data;
    }
  }
}
</script>

<style scoped>
.teacher-list-container {
  display: flex;
  flex-wrap: wrap;
}

.teacher-item {
  box-sizing: border-box;
  padding: 10px;
  /* 这里的宽度是基于整个容器的25%，减去左右的边距（例如这里是10px） */
  /* 调整这里的数值以适应你的具体设计要求 */
}
</style>